import './index.css'
import React, { Component } from 'react'
import { Layout, Pagination,message } from 'antd'
import Article from '../Article'
const { Content } = Layout
export default class Contentpart extends Component {
    componentDidMount(){
        message.success('文章数据加载成功！')
    }
    state = {
        Articles: [
            {id:1,title:'文章1',brief:'文章简介',pic:'https://ss.im5i.com/2021/10/01/l980l.jpg',author:'神码人'},
            {id:2,title:'文章2',brief:'文章简介',pic:'https://ss.im5i.com/2021/10/01/l980l.jpg',author:'神码人'},
            {id:3,title:'文章3',brief:'文章简介',pic:'https://ss.im5i.com/2021/10/01/l980l.jpg',author:'神码人'},
            {id:4,title:'文章4',brief:'文章简介',pic:'https://ss.im5i.com/2021/10/01/l980l.jpg',author:'神码人'},
            {id:5,title:'文章5',brief:'文章简介',pic:'https://ss.im5i.com/2021/10/01/l980l.jpg',author:'神码人'},
        ],
        isExist:true
    }
    render() {
        const { Articles,isExist } = this.state
        return (
            <div>
                <Content style={{ margin: '24px 16px 0', height: '70%' }}>
                    <div className="container">
                        <div className="articleList">
                            {
                               isExist?
                               Articles.map((obj)=>{
                                return  <Article key={obj.id} id={obj.id} title={obj.title} author={obj.author} brief={obj.brief} pic={obj.pic} />
                            }):<Article/>
                            }
                        </div>
                    </div>
                    <div style={{ textAlign: 'center', marginTop: '20px' }}>
                        <Pagination defaultCurrent={1} total={8} pageSize={4} />
                    </div>
                </Content>
            </div>
        )
    }
}
